<template>
  <div>
    <p>firstName: {{ state.firstName }}</p>
    <p>lastName: {{ state.lastName }}</p>
    <p>fullName: {{ state.fullName }}</p>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const state = reactive({
      firstName: '谈',
      lastName: '啸'
    })
    /* state.fullName = computed(() => {
      return state.firstName + '~' + state.lastName
    }) */

    // !目前和上面等价
    state.fullName = computed({
      get() {
        return state.firstName + '~' + state.lastName
      }
    })
    return { state }
  }
}
</script>

<style lang="scss" scoped></style>